<template>
	<el-form size="large" ref="ruleFormRef" :model="ruleForm" :rules="loginType==='USERNAMESMS'?rulesSms:rules" class="login-content-form">
		<el-form-item class="login-animation1" prop="userName">
			<el-input type="text" placeholder="请输入用户名或身份证" v-model="ruleForm.userName" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="userPassword">
			<el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.userPassword" autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="isShowPassword = !isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3" prop="shortMsgCode" v-if="loginType==='USERNAMESMS'">
			<el-col :span="15">
				<el-input type="text" maxlength="6" placeholder="请输入手机验证码" v-model="ruleForm.shortMsgCode" clearable autocomplete="off">
					<template #prefix>
						<el-icon class="el-input__icon"><ele-Message /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="8">
				<el-button type="primary" :disabled="disableCodeBtn" @click="sendMessage(ruleFormRef)" class="login-content-code">{{
					(!msgForm.smsSendBtn && msgForm.smsText) || msgForm.time + ' s'
				}}</el-button>
			</el-col>
		</el-form-item>
		<el-form-item class="login-animation3" prop="sliderPosition">
      	<div ref="captchaImageContainer"  class="captcha-container" style="width: 310px;">
        <div class="captcha-image-container" @mousedown="startDrag" @touch-start="startDrag">
          <img :src="originalImgSrc" alt="拼图验证码" class="captcha-bg" />
          <img :src="sliderImgSrc" alt="滑块" class="slider" :style="{ left: sliderPosition + 'px' }" />
        </div>
        <el-slider
            style="padding: 15px"
            v-model="sliderPosition"
            :max="captchaImageContainer?.offsetWidth || 310"
            :show-tooltip="false"
            :input-size="'small'"
        />
      </div>
		</el-form-item>
		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round @click="onSignIn(ruleFormRef)" :loading="loading.signIn" :disabled="loading.signIn">
				<span>登录</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import loginUsername from '@/views/login/loginUsername';
export default defineComponent({
	name: 'loginAccount',
	setup() {
		const { disableCodeBtn, msgForm,sendMessage,onSignIn,loginType, ruleFormRef,captchaImageContainer, loading, ruleForm, getCode, originalImgSrc,sliderImgSrc,startDrag,sliderPosition, rules,rulesSms, isShowPassword } = loginUsername();


    return {
			disableCodeBtn,
			msgForm,
			sendMessage,
			ruleFormRef,
      captchaImageContainer,
			onSignIn,
			loading,
			ruleForm,
			getCode,
      originalImgSrc,
      sliderImgSrc,
      startDrag,
      sliderPosition,
			rules,
			rulesSms,
			isShowPassword,
			loginType
		};


	},
});
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		display: block;
		width: 100%;
		height: 40px;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}


  .captcha-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
  }

  .captcha-image-container {
    position: relative;
    width: 100%;
    cursor: pointer;
  }

  .captcha-bg {
    width: 100%;
    height: auto;
  }

  .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    cursor: grab;
    cursor: -webkit-grab;
  }

}
</style>
